<template>
  <div>
    <el-aside style="width: auto;">
      <!-- 侧边栏导航 -->
      <el-menu :default-active="nowRoute" :collapse="isCollapse" style="height: 100vh;" router>
        <el-menu-item :index="item.path" v-for="item in nochildren" :key="item.path">
          <i :class="'el-icon-' + item.icon"></i>
          <span slot="title">{{item.title}}</span>
        </el-menu-item>
        <el-submenu :index="item.path" v-for="item in haschildren" :key="item.path">
          <template slot="title">
            <i :class="'el-icon-' + item.icon"></i>
            <span slot="title">{{item.title}}</span>
          </template>
          <template v-for="child in item.children">
            <el-menu-item :key="child.path" :index="child.path">
              {{child.title}}
            </el-menu-item>
          </template>
        </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
  export default {
    inject: ['reload'],
    data() {
      return {
        isCollapse: true,
        nowRoute: '/index',
        //公共菜单
        menuList: [{
          path: '/index',
          title: '首页',
          icon: 's-home'
        }, {
          path: '/user/msg',
          title: '消息通知',
          icon: 'message-solid'
        }, {
          path: '/user/upload',
          title: '上传作品',
          icon: 'upload'
        }]
      };
    },
    created() {
      //如果是管理员则追加管理菜单
      if (this.$store.state.userInfo.roleId == 0 && this.menuList.length < 4) {
        this.menuList = this.menuList.concat(this.$store.state.sysMenu);
      }
    },
    computed: {
      haschildren() {
        return this.menuList.filter(m => m.children);
      },
      nochildren() {
        return this.menuList.filter(m => !m.children);
      }
    }
  };
</script>

<style>
</style>
